import Token from '@/component/Token'
import styled from "./index.module.scss"
import {HomeHeader} from '@/pages/home/HomeHeader'
import {Outlet, useNavigate} from 'react-router-dom'

const leftUls = [
	{
		name: "个人资料",
		url: "/personal/personalData"
	},
	{
		name: "物流信息",
		url: "/personal/personalDeal"
	},
	{
		name: "收货地址",
		url: "/personal/shippingAddress"
	},
	{
		name: "售后服务",
		url: "/personal/received"
	}
]

const Personal = () => {
	const navigate = useNavigate()

	return (
		<Token>
			<div className={styled.personal}>
				<HomeHeader></HomeHeader>
				<div className={styled.personal_body}>
					<div className={styled.personal_body_left}>
						{
							leftUls.map(item => (
								<div key={item.name}>
									<span onClick={() => navigate(item.url, {
										replace: true
									})}>{item.name}</span>
								</div>
							))
						}
					</div>
					<div className={styled.personal_body_right}>
						<Outlet></Outlet>
					</div>
				</div>
			</div>
		</Token>
	)
}

export default Personal
